<template>
	<div class="list-layout mt16">
		<!-- 批量删除 批量导出  批量导入 下载模板 新增-->
		<div class="btns clear">
			<span class="title">{{ title }}</span>
			<template v-if="showBtns">
				<Button type="primary" @click="createfaultCodeShowH" v-has="'moldLedgerAddBtn'">{{ $t('common.New') }}</Button>
				<Button @click="delFaultCodeShowClick" v-has="'moldLedgerBatchDelBtn'">{{ $t('common.batchDelete') }}</Button>
				<Button @click="exportTemplateClick" v-has="'moldLedgerExport'">{{ $t('common.Export') }}</Button>
				<Button @click="importExcelShow" v-has="'moldLedgerImport'">导入</Button>
				<Button @click="exportTemplate" v-has="'moldLedgerDownload'">{{ $t('common.Download') }}</Button>
				<Button @click="getTableColumns(columns)">
					{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
				</Button>
			</template>
		</div>
		<!-- 表格 -->
		<div class="tableContent">
			<Table
				class="resizable-table"
				border
				@on-column-width-resize="onColumnWidthResize"
				:columns="columnsList"
				ellipsis
				ref="selection"
				stripe
				:data="dataArr"
				@on-selection-change="onSelectChange"
				@on-select="onSelect"
			>
				<template slot-scope="{ row }" slot="action" v-if="showAction">
					<span class="operationBtn" @click="check(row)"><i class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
					<span class="operationBtn" @click="checkMore(row)"><i class="iconfont zy-common-chakan"></i>履历</span>
					<span class="operationBtn" @click="createfaultCodeShowH(row)"><i class="iconfont zy-common-bianji"></i>{{ $t('common.Edit') }}</span>
					<span class="operationBtn" @click="delPrrShowH(row)" v-has="'moldLedgerDelBtn'"
						><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span
					>
				</template>
				<template slot-scope="{ row }" slot="productionMode">
					<span class="operationBtn" style="color: #3271f0" @click="showMc(row)">{{ row.productionMode }}</span>
				</template>
			</Table>
		</div>
		<!-- 单次刃磨寿命清单 -->
		<Modal :mask-closable="false" v-model="mcShow" title="单次刃磨寿命清单" class="modal-content-layout" width="55%">
			<div class="alarmConfiguration">
				<div class="list-layout2">
					<!-- 表格 -->
					<div class="tableContent mt14">
						<Table
							class="resizable-table"
							border
							@on-column-width-resize="onColumnWidthResize"
							:columns="mcColumns"
							ellipsis
							ref="selection"
							stripe
							:data="mcData"
						>
						</Table>
					</div>
					<!-- 分页 -->
					<div class="pageWrap mt16">
						<pageLeftTitle :total="mcTotal" selected="0" />
						<Page
							:total="mcTotal"
							:page-size="mcPageSize"
							:page-size-opts="pageSizeOption"
							:current="mcPageNum"
							@on-change="changePageNum2"
							@on-page-size-change="changePageSize2"
							show-sizer
							show-total
						/>
					</div>
				</div>
			</div>
			<div slot="footer">
				<Button type="default" @click="mcShow = false">{{ $t('common.Cancle') }}</Button>
			</div>
		</Modal>
		<!-- 分页 -->
		<div class="pageWrap mt16">
			<pageLeftTitle :total="total" :selected="delIds.length" />
			<Page
				:total="total"
				:page-size="pageSize"
				:page-size-opts="pageSizeOption"
				:current="pageNum"
				@on-change="changePageNum"
				@on-page-size-change="changePageSize"
				show-sizer
				show-total
			/>
		</div>
		<addMold ref="addMold" @changeNum="changeNum"></addMold>
		<!-- 请确认是否删除弹框 -->
		<Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
			<div class="icon red">
				<i class="iconfont zy-common-shanchu"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.confirmDelete') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>
		<importExcelModal
			:importExcelStateF="importExcelState"
			v-if="importExcelState"
			url="/dms/moldinfo/import"
			@importExcelChange="importExcelChange"
		></importExcelModal>
	</div>
</template>
<script>
import { searchApi, deleteApi, templateApi, exportApi } from '@/api/moldManagement/moldLedger.js';
import { getDictData } from '@/api/index.js';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import addMold from './addMold.vue';
import importExcelModal from '@/components/importExcelNew.vue';
import fileDownload from 'js-file-download';
export default {
	name: 'moldPage',
	mixins: [toggleTableOperation],
	components: { importExcelModal, addMold },
	props: {
		showBtns: {
			type: Boolean,
			default: true,
		},
		showAction: {
			type: Boolean,
			default: true,
		},
		isAll: {
			type: Boolean,
			default: true,
		},
		title: {
			type: String,
			default: '',
		},
	},
	computed: {
		columns: function () {
			const list = [
				{
					key: 'selection',
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					title: '序号',
					width: 80,
					align: 'center',
					render: (h, params) => {
						return h('span', params.index + (this.pageNum - 1) * this.pageSize + 1);
					},
				},
				{
					title: '资产编号',
					key: 'assetCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装编号',
					key: 'equipCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装名称',
					key: 'equipName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装类型',
					key: 'moldModel',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装状态',
					key: 'moldState',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '生产次数',
					key: 'productionMode',
					minWidth: 100,
					slot: 'productionMode',
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '是否启用',
					key: 'isEnabled',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						return h('div', params.row.isEnabled == 1 ? '是' : '否');
					},
				},
				{
					title: '二级保养次数',
					key: 'secondaryFrequency',
					minWidth: 160,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '二级实际保养模次',
					key: 'maintenanceMode',
					minWidth: 160,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '三级保养模次',
					key: 'thirdLevelFrequency',
					minWidth: 160,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				// {
				// 	title: '三级实际保养模次',
				// 	key: 'maintenanceModeThree',
				// 	minWidth: 160,
				// 	align: 'center',
				// 	resizable: true,
				// 	tooltip: true,
				// },
				{
					title: '工装等级',
					key: 'moldGrade',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '评分',
					key: 'score',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '日定额',
					key: 'dayQuota',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工时定额（PCS/H）',
					key: 'hourQuota',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '理论节拍(S)',
					key: 'moldingCycle',
					minWidth: 120,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装寿命',
					key: 'moldLife',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装剩余寿命',
					key: 'moldResidueLife',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '功能位置',
					key: 'functionalLocationName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库区',
					key: 'reservoirArea',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库位',
					key: 'warehouseLocation',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '利用率',
					key: 'useRate',
					minWidth: 140,
					align: 'center',
					resizable: true,
					tooltip: true,
          render: (h, params) => {
            return h('div', {},params.row.useRate + '%');
          },
				},
				{
					title: '创建人',
					key: 'maintainer',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '创建时间',
					key: 'maintenanceTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作',
					slot: 'action',
					fixed: 'right',
					minWidth: 350,
					align: 'center',
				},
			];
			if (!this.showAction) {
				list.pop();
			}
			return list;
		},
	},
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			total: 0,
			dataArr: [],
			delIds: [],
			selection: [],
			pageSizeOption: [10, 20, 30, 40],
			loading: false,
			searchParams: {},

			delFaultCodeShowF: false,
			moldStateList: [],
			importExcelState: false /*批量导入*/,
			mcColumns: [
				{
					title: '序号',
					width: 80,
					align: 'center',
					render: (h, params) => {
						return h('span', params.index + (this.mcPageNum - 1) * this.mcPageSize + 1);
					},
				},
				{
					title: '时间',
					key: 'moldState',
					minWidth: 150,
					align: 'center',
					resizable: true,
					tooltip: true,
				},

				{
					title: '当班产量',
					key: 'assetCode',
					minWidth: 150,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '产量累计',
					key: 'moldCode',
					minWidth: 150,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '备注',
					key: 'moldName',
					minWidth: 150,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
			],
			mcShow: false,
			mcPageSize: 10,
			mcPageNum: 1,
			mcTotal: 0,
		};
	},
	mounted() {
		this.getTableColumnsWidth(this.columns);
		getDictData('工装状态').then((res) => {
			this.moldStateList = res.data;
		});
	},
	methods: {
		// 履历
		checkMore(row) {
			this.$router.push({
				path: '/moldManagement/moldLedger/moldDetail',
				query: {
					mmoldCode: row.moldCode,
					status: 'detail',
				},
			});
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		//查询列表
		searchList(params) {
			const data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...params,
			};
			searchApi(data, this.isAll).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		showMc(row) {
			this.mcRow = row;
			this.mcShow = true;
		},
		check(row) {
			this.$refs.addMold.check(row);
		},
		//增加或编辑
		createfaultCodeShowH(row) {
			this.$refs.addMold.createfaultCodeShowH(row);
		},
		addOk(name) {
			this.$refs.addMold.addOk(name);
		},
		// 点击某条数据显示详情
		onSelect(selection, row) {
			const selectedRow = row[0]; // 假设只允许选择一行数据
			const id = row.id; // 假设ID字段名为id
			console.log(id);
		},
		//勾选列表
		onSelectChange(selection) {
			let myArray = [];
			selection.map((item, index) => {
				myArray.push(item.id);
			});
			this.delIds = myArray;
			if (selection.length > 0) {
				this.allCheck = true;
			} else {
				this.allCheck = false;
			}
		},
		//批量删除
		delFaultCodeShowClick() {
			if (this.delIds.length == 0) {
				this.$Message.warning({
					content: `${this.$t('common.deleteItems')}`,
					duration: 6,
					closable: true,
				});
				return;
			} else {
				this.delFaultCodeShowF = true;
			}
		},
		//删除
		delPrrShowH(row) {
			//点击展示提示删除弹窗
			this.delFaultCodeShowF = true;
			this.delIds = [];
			this.delIds.push(row.id);
		},
		deleteOk() {
			this.loading = true;
			let params = { delIds: this.delIds };
			deleteApi(params).then((res) => {
				this.loading = false;
				if (res.code === 200) {
					this.changeNum();
					this.$Message.success('删除成功');
					this.allCheck = false;
					this.delFaultCodeShowF = false;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		//下载模板
		exportTemplate() {
			// this.$locationWifiPrinter({
			// 	// tmPlantId: 1,
			// 	tmPlantId: 'AE682F26B938471E95770FA9F785CA79',
			// 	templateType: 'workReplenishPrint',
			// 	ids: ['3D26FFBB55EB4EC0BA32F0572EE6FD89'],
			// });
			const filName = '工装台账导入模板';
			templateApi().then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
		//导入
		importExcelShow() {
			this.importExcelState = true;
		},
		importExcelChange(val) {
			this.importExcelState = false;
			if (val === 'success') {
				this.changeNum();
			}
		},
		//导出
		exportTemplateClick() {
			let params = {
				delIds: this.delIds,
				...this.searchParams,
			};
			// for (let key in this.searchParams) {
			// 	if (this.searchParams[key]) {
			// 		this.$set(params, key, this.searchParams[key]);
			// 	}
			// }
			const filName = '工装台账';
			exportApi(params).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
	},
};
</script>

<style scoped></style>
